// $color:pink;

// #app{
//     color: $color;
// }

// 变量范围
$nav-color:green;
#content {
  $color: pink;
  color: $color;
//   color: $nav-color;
//   background-color: black
}
#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        // 对某个子元素进行设置
        &.active { color: red }
      }
    }
    aside { background-color: #f90 }
  }


//   @mixin定义模块  @include使用   单行文本溢出
@mixin dan ($fz){
    // 还可以接收函数
    font-size: $fz;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
//   给需要单行溢出的
.myMixin{
    p{
        // 传入
        @include dan(20px);
        // 单行文本溢出 需要给宽度
        width: 80px;
    }
}

// 主轴
$flex-jc: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly,
);


// $each 进行遍历
@each $flexKey, $flexValue in $flex-jc { 
  .jc-#{$flexKey} {
    justify-content: $flexValue;
  }
}


